@extends('admin::layouts.master')
@section('title')
    修改角色
@endsection
@section('tab')
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form" lay-filter="form_edit">
                <div class="layui-form-item">
                    <label for="L_name" class="layui-form-label">
                        <span class="x-red">*</span>角色名称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_name" name="name" required="" lay-verify="name" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_display_name" class="layui-form-label">
                        <span class="x-red">*</span>角色别名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_display_name" name="display_name" required="" lay-verify="display_name"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_description" class="layui-form-label">
                        <span class="x-red"></span>角色描述</label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_description" name="description" lay-verify="description" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="username" class="layui-form-label">
                        <span class="x-red">*</span>权限选择</label>
                    <div class="layui-input-inline">
                        <ul id="zTreeDemo" class="ztree"></ul>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label"></label>
                    <button class="layui-btn" lay-filter="edit" lay-submit="">修改</button>
                    <input type="hidden" id="L_id" name="id">
                </div>
            </form>
        </div>
    </div>
@endsection

@section('tab_css')
    @css(lib/zTree/css/zTreeStyle/zTreeStyle.css)
@endsection
@section('tab_js')
    @js(lib/zTree/js/jquery.ztree.core.js)
    @js(lib/zTree/js/jquery.ztree.excheck.js)
    <script>
        /*加载菜单树*/
        $(document).ready(function(){
            var setting = {
                check: {
                    enable: true,
                    chkStyle: "checkbox",
                    chkboxType: { "Y" : "ps", "N" : "s" }
                },
                data: {
                    key: {
                        checked: "is_checked"
                    },
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pid",
                        rootPId: 0
                    }
                },
                view: {
                    showIcon: false
                }
            };


            var zNodes = '{!! $arr_permission !!}';
            zNodes =json_string_to_obj(zNodes);
            $.fn.zTree.init($("#zTreeDemo"), setting, zNodes);
        });

        layui.use(['form', 'layer','layedit','jquery'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer,
                    layedit = layui.layedit;

                //创建一个编辑器
                var editIndex = layedit.build('LAY_demo_editor');

                //自定义验证规则
                form.verify({
                    name: function(value) {
                        if (value.length <= 0) {
                            return '不能为空';
                        }
                        if (value.length > 30) {
                            return '不能超过30个字符啊';
                        }
                    },
                    display_name: function(value) {
                        if (value.length > 50) {
                            return '不能超过50个字符啊';
                        }
                    },
                    description: function(value) {
                        if (value.length > 150) {
                            return '不能超过150个字符啊';
                        }
                        layedit.sync(editIndex);

                    },
                });

                //监听提交
                form.on('submit(edit)',
                    function(data) {
                        var $_url = '{{route('admin_role_update')}}';
                        var $_data = data.field;

                        var $_zTreeObj = $.fn.zTree.getZTreeObj("zTreeDemo");
                        $_data.role_permission = get_arr_ids($_zTreeObj.getCheckedNodes(true));
                        $.ajax({
                            url:$_url,
                            type:'put',
                            data:$_data,
                            dataType : "json",
                            success:function(result){
                                if(result.state === 0){
                                    layer.msg(
                                        "修改成功",
                                        {icon: 6},
                                        function() {
                                            //关闭当前frame
                                            xadmin.close();

                                            // 可以对父窗口进行刷新
                                            xadmin.father_reload();
                                        });
                                }else{
                                    layer.msg(result.msg, {time:2000,icon: 5});
                                }

                            }});
                        return false;

                    });

                //表单初始赋值
                form.val('form_edit', {
                    "id": '{{$arr_data['id']}}',
                    "name": '{{$arr_data['name']}}',
                    "display_name": '{{$arr_data['display_name']}}',
                    "description": '{{$arr_data['description']}}',
                })

            });
    </script>
@endsection




